<html>
    <head>
        <!-- deck.gl standalone bundle -->
        <script src="https://unpkg.com/deck.gl@^9.0.0-beta.2/dist.min.js"></script>
        <script src="https://unpkg.com/@deck.gl/carto@^9.0.0-beta.2/dist.min.js"></script>
        <!-- Maplibre dependencies -->
        <script src='https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js'></script>
        <link href='https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css' rel='stylesheet' />

        <title>CARTO deck.gl example</title>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                font-family: UberMove, Helvetica, Arial, sans-serif;
            }
            #container {
                width: 100vw;
                height: 100vh;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
    </body>

    <script type="text/javascript">
        const cartoMapId = 'ff6ac53f-741a-49fb-b615-d040bc5a96b8';

        // Get map info from CARTO and update deck
        deck.carto.fetchMap({cartoMapId}).then(({initialViewState, mapStyle, layers}) => {
            const MAP_STYLE = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`;
            const deckgl = new deck.DeckGL({
                container: 'container',
                controller: true,
                mapStyle: MAP_STYLE,
                initialViewState,
                layers
            });
        });
    </script>
</html>
